<template>
  <a-modal
    destroyOnClose
    title="请选择链接"
    :zIndex="zIndex"
    v-model="value"
    :width="700"
    :footer="null"
    :closable="false"
  >
    <a-card :loading="loading">
      <a-select v-if="LinkList.length > 0" style="width: 100%" placeholder="选择页面" @change="e => handleChange(e)">
        <a-select-option
          v-for="(item, index) in LinkList"
          :key="index + ''"
        >
          {{ item.name }}
        </a-select-option>
      </a-select>
      <a-row
        style="margin-top: 10px;"
        v-if="linkInfo && linkInfo.params && linkInfo.params.length > 0"
        v-for="(par, parIndex) in linkInfo.params"
        :key="parIndex"
        :gutter="[16, 16]"
      >
        <a-col :span="4" style="text-align: center;">{{ par.key }}</a-col>
        <a-col :span="20">
          <a-input v-model="linkInfo.params[parIndex].value" />
          <a-row style="margin-top: 10px;">{{ par.desc }}</a-row>
        </a-col>
      </a-row>
    </a-card>
    <a-row justify="end" type="flex" style="margin-top: 15px;">
      <a-space>
        <a-button @click="onCancel">
          取消
        </a-button>
        <a-button type="primary" @click="onOk">
          确认
        </a-button>
      </a-space>
    </a-row>
  </a-modal>
</template>

<script>
import { link } from '@/api/diy'

export default {
  name: 'SelectLink',
  components: {},
  data () {
    return {
      LinkList: [],
      linkInfo: {},
      loading: true
    }
  },
  props: {
    zIndex: {
      type: Number,
      default: 1000
    },
    value: {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: ''
    },
    isUserCenter: {
      type: Boolean,
      default: false
    }
  },
  created () {
    this.getList()
  },
  watch: {
    value: function (val) {
      if (!val) {
        this.linkInfo = {}
      }
    }
  },
  methods: {
    getList () {
      this.loading = true
      const param = {}
      if (this.type && this.type != '') {
        param.type = this.type
      }
      link(param)
      .then(res => {
        this.loading = false
        for (let i = 0; i < res.data.list.length; i++) {
          if (!this.isUserCenter && res.data.list[i].name == '付款码') {
            res.data.list.splice(i, 1)
          }
        }
        this.LinkList = res.data.list
      })
    },
    onCancel () {
      this.$emit('input', false)
    },
    onOk () {
      this.$emit('input', false)
      var param = ''
      this.linkInfo.params.forEach((element, index) => {
        if (index === 0) {
          param += element.key + '=' + element.value
        } else {
          param += '&' + element.key + '=' + element.value
        }
      })
      if (param !== '') {
        this.linkInfo.link += '?' + param
      }
      this.$emit('onOk', this.linkInfo)
    },
    handleChange (e) {
      this.linkInfo = JSON.parse(JSON.stringify(this.LinkList[e]))
    }
  }
}
</script>
<style lang="less" scoped>
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.title-but {
  margin-left: 6px;
}
</style>
